<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        .box {
            width: 100%;
            height: 100%;
        }

        #nav {
            width: 100%;
            height: 88px;
            background-color: #FF4201;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #nav > div {
            color: #fff;
            font-size: 28px;
        }

        #content {
            width: 100%;
            height: 89vh;
        }

        #footer {
            width: 100%;
            height: 103px;
            background-color: #FF4201;
        }

        #bottom {
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .img {
            width: 50px;
            height: 50px;
        }

        .font {
            font-size: 30px;
            color: #fff;
        }
        li>div{
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .current {
            background-color:blue;
        }
    </style>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>

<div class="box">
    <div id="nav">
        <div>海淘淘</div>
    </div>
    <div id="content">
        <router-view/>
    </div>
    <div id="footer">
        <ul id="bottom">
            <router-link to="/index" tag="li">
                <!--                :class="{active : bottom_box == item.name}" "-->
                <div :class="{current : name == '首页'}" @click="btn_bottom('首页')">
                    <img class="img" src="./index_img.png"/>
                    <div class="font">首页</div>
                </div>
            </router-link>
            <router-link to="/category" tag="li">
                <div :class="{current : name == '分类页'}" @click="btn_bottom('分类页')">
                    <img class="img" src="./index_img.png"/>
                    <div class="font">分类页</div>
                </div>
            </router-link>
            <router-link to="/cart" tag="li">
                <div :class="{current : name == '购物车'}" @click="btn_bottom('购物车')">
                    <img class="img" src="./index_img.png"/>
                    <div class="font">购物车</div>
                </div>
            </router-link>
            <router-link to="/user" tag="li">
                <div :class="{current : name == '用户中心'}" @click="btn_bottom('用户中心')">
                    <img class="img" src="./index_img.png"/>
                    <div class="font">用户中心</div>
                </div>
            </router-link>
        </ul>
    </div>
</div>
<script>
    // 组件的模板对象
    let Index = {
        template: `<div style="display:flex;justify-content:center;font-size: 50px"">我是首页组件</div>`
    }
    let Category = {
        template: `<div style="display:flex;justify-content:center;font-size: 50px"">我是分类页组件</div>`
    }
    let Cart = {
        template:`<div style="display:flex;justify-content:center;font-size: 50px"" >我是购物车组件</div>`
    }
    let User = {
        template: ` <div style="display:flex;justify-content:center; font-size: 50px">我是用户中心组件</div>`
    }

    let router = new VueRouter({
        routes: [
            {path: '/', redirect: '/index'}, // 路由重定向
            {path: '/index', component: Index},
            {path: '/category', component: Category},
            {path: '/cart', component: Cart},
            {path: '/user', component: User}
        ]
    })
    var vm = new Vue({
        el: '.box',
        router,  // 挂载路由
        data: {
            name:''
        },
        methods:{
            btn_bottom(e){
                this.name=e
            }
        }
    })
</script>


</body>
</html>
